<template>
  <a-modal
    v-model="visible"
    title="列表显示设置"
    :maskClosable="false"
    :width="600"
    :body-style="{ padding: '0 24px' }"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <a-spin :spinning="loading || confirmLoading">
      <a-row>
        <a-col :span="14" class="field-wrap">
          <div class="title">需显示的字段</div>
          <a-checkbox
            v-for="item in fields"
            :key="item[dataIndex]"
            :checked="checkedKeys.includes(item[dataIndex])"
            @change="(e) => handleCheckbox(e, item[dataIndex])"
          >
            {{ item[title] }}
          </a-checkbox>
        </a-col>
        <a-col :span="10" class="field-sorter">
          <div class="title">显示顺序</div>
          <draggable
            handle=".handler"
            @end="onSort"
          >
            <div class="field-sorter-item" v-for="field in selectedFields" :key="field[title]">
              <span class="field-sorter-item-name">{{ field[title] }}</span>
              <a-icon type="menu" class="handler" />
            </div>
          </draggable>
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
import draggable from 'vuedraggable';
import { reorder } from '@/utils/util';

export default {
  name: 'FieldConfig',
  components: {
    draggable
  },
  props: {
    fields: {
      type: Array,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    dataIndex: {
      type: String,
      required: true
    },
    selectedKeys: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      checkedKeys: [...this.selectedKeys], 
    }
  },
  computed: {
    selectedFields() {
      return this.checkedKeys.map(key => this.fields.find(field => field[this.dataIndex] === key));
    }
  },
  watch: {
    selectedKeys(value) {
      this.checkedKeys = [...value];
    }
  },
  methods: {
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
      this.confirmLoading = false;
    },
    onSort(e) {
      const { oldIndex, newIndex } = e;
      this.checkedKeys = reorder(this.checkedKeys, oldIndex, newIndex);
    },
    handleCheckbox(e, key) {
      const { checked } = e.target;
      if (checked) {
        this.checkedKeys.push(key);
      } else {
        this.checkedKeys = this.checkedKeys.filter(item => item !== key);
      };
    },
    handleCancel() {
      this.checkedKeys = this.selectedKeys;
    },
    handleOk() {
      this.confirmLoading = true;
      this.$emit('ok', this.checkedKeys);
    }
  }
}
</script>

<style lang="less" scoped>
@height-base: 400px;

.field-wrap {
  min-height: @height-base;
  padding: 24px 0;
  border-right: 1px solid #e8e8e8;

  /deep/ .ant-checkbox-wrapper {
    margin-bottom: 8px;
    font-size: 13px;
  }
}
.field-sorter {
  padding: 24px 0 24px 20px;
  user-select: none;

  &-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
    &-name {
      flex: 1;
      margin-right: 7px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .handler {
      cursor: pointer;
    }
  }
}
.title {
  margin-bottom: 10px;
  font-size: 13px;
  color: #787878;
}
</style>